/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <!-- <div ref="myChart" class="pie"></div -->
    <div class="resource-pie__wrap">
        <div class="pie-left">
            <icon-bg class="pie-left-icon" :icon="data.icon" color="#000"></icon-bg>
            <div style="display:inline-block;">
                <p class="title">{{ data.title }}</p>

                <span class="unit">已分配{{ data.allocated }}/{{(data.total) }}{{ data.unit }}</span>
            </div>
            <div v-if="showAllocatedAlert(data)"
                 class="pie-alert">
                <span class="sf-comp-iconfont iconfont iconwin-alert"></span>
                <span><lang>可分配资源不足</lang></span>
            </div>
        </div>
        <div class="pie-list">
            <div class="pie-items">
                <sf-e-charts
                    ref="myChart"
                    :options="defaultOption"
                    :auto-destroy="false"
                    :auto-refresh="true"
                    class="pie"></sf-e-charts>
                <div class="user-info">
                    <div class="user-info-contain">
                        <div class="content m-b10 user-info-contain-used">
                            <lang>已使用</lang>
                            <span class="font-important m-lr5">{{ data.user }}</span>
                            <span>{{ data.unit }}</span>
                        </div>
                        <div class="content m-b10 user-info-contain-surplus">
                            <lang>剩余</lang>
                            <span class="font-important m-lr5">{{ data.noUser }}</span>
                            <span>{{ data.unit }}</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.pie-charts-wrap {
    color: #FFF;
    height: 215px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-top: none;
}

.pie_charts {
    height: 100%;
    padding: 10px 0 15px 10px;
    border-radius: 6px;
    background: #251d39;
}
.resource-pie__wrap {
    position: relative;
    .pie-left-icon {
        margin-right: 10px;
        vertical-align: text-bottom;
    }
    .font-important {
        font-weight: bold;
        font-size: 12px;
        color: #FFF;
    }
    .pie-list {
        display: flex;
        .pie-items {
            flex: 1;
            height: 125px;
            display: flex;

            .pie {
                margin-left: 25px;
            }
        }
        .user-info {
            float: right;
            text-align: center;
            margin: auto 0;
            margin-left: 60px;
            .user-info-contain {
                display: inline-block;
                text-align: left;

                .user-info-contain-used, .user-info-contain-surplus {
                    position: relative;
                    &:before {
                        content: '';
                        background: #5F3BFF;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        position: absolute;
                        left: -18px;
                        top: 6px;
                    }
                }

                .user-info-contain-surplus {
                    &:before {
                        background: #5F3BFF;
                    }
                }

                .user-info-contain-surplus {
                    &:before {
                        background: #CCC;
                    }
                }
            }
        }
    }
    .pie-left {
        display: flex;
        align-items: center;
        position: relative;
        padding: 5px 0 5px 25px;

        .pie-alert {
            position: absolute;
            left: 140px;
            top: 8px;
            .iconfont {
                font-size: 14px;
                margin-right: 3px;
                color: orange;
            }
        }
        .title {
            font-size: 16px;
            font-weight: bold;
        }
    }
    .pie {
        width: 25%;
        height: 120px;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 1380px) {
    .resource-pie__wrap .pie-list .user-info {
        margin-left: 15px;
    }
    .resource-pie__wrap .pie-left .sub-title {
        margin-left: 10px;
    }
}
</style>
<script>

/**
 * .vue
 * @description:
 * @author: zhb
 * @date: 2021/5/8
 */


// 引入基本模板
import BaseChart from './base_chart';
import IconBg from 'src/components/icon_bg';
export default {
    mixins: [BaseChart],
    props: {
        data: {
            type: Object, required: true, default: () => {
                return {
                };
            }
        }
    },
    data () {
        return {
            myChart: null,
            seriesData: [],
            defaultOption: {},
            percent: ''
        };
    },

    components: {
        IconBg
    },

    watch: {
        data: {
            deep: true,
            immediate: true,
            handler () {
                this.$nextTick().then(() => {
                    this.initData();
                });
            }
        }
    },
    mounted () {
        this.myChart = this.$refs.myChart;
    },
    methods: {

        // 初始化数据
        initData () {
            this.seriesData = this._getSeriesData();
            let seriesData = this.seriesData;
            let vm = this;

            // 绘制图表
            this.defaultOption = {
                title: {
                    text: `${this.data.userPercent}%`,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter (data) {
                        let { seriesName, name, value } = data;
                        let { user, noUser } = vm.data;

                        // 已使用和剩余均为0
                        if (user === 0 && user === noUser) {
                            value = 0;
                        }
                        return `${seriesName}<br/>${name} : ${value}${vm.data.unit}`;
                    }
                },
                left: 0,
                yAxis: '50',
                series: [
                    {
                        type: 'pie',
                        name: _('使用情况'),
                        radius: ['88%', '66%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'outside'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        color: ['#5F3BFF', '#eee'],
                        data: seriesData
                    }
                ]
            };

            this.onResize();
        },

        _getSeriesData () {
            let { user, noUser } = this.data;

            // 已使用和剩余均为0
            if (user === 0 && user === noUser) {
                noUser = 1;
            }
            return [
                { value: user, name: '已使用' },
                { value: noUser, name: '剩余' }
            ];
        },

        showAllocatedAlert (data) {
            /* eslint-disable */
            let noAllocatedPercent = 100 - data.allocatedPercent;
            return noAllocatedPercent < 10;
        },

        onResize () {
            let vm = this;
            if (vm.myChart && typeof this.myChart.resize === 'function') {
                vm.myChart?.resize();
            }
        }
    },

    beforeDestroy () {
        if (this.myChart && typeof this.myChart.dispose === 'function') {
            this.myChart?.dispose();
        }
        this.myChart = null;
    }
};
</script>

